<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="static/assets/global/css/components.css" type="text/css"/>
    <link rel="stylesheet" href="static/assets/admin/pages/css/login.css" type="text/css"/>
</head>
<body class="login">
        <h3 class="form-title">商品详情页面</h3>
        <ul id="container" />
        <button class="btn blue" id="createOrder" type="submit">
            下单
        </button>
</body>
<style>
      body{
          background-color: #efefef;
          overflow-x: hidden
      }
       ul li{
           padding: 0;
           margin: 0;
           list-style: none;
       }
        #container{
            width: 1200px;
        }
        #container li{
            width: 234px;
            /* height: 246px; */
            padding: 34px 0 20px;
            float: left;
            text-align: center;
            margin-left: 14px;
            background: #fff;
            -webkit-transition: all .2s linear;
            transition: all .2s linear;
            cursor: pointer;
        }

        #container li:hover{
            z-index: 2;
            -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
        }
        #container li img{
            width: 160px;
            margin: 0 auto 18px;
        }
        #container li .title{
            font-size: 14px;
            font-weight: 400;
        }

        #container li .desc {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            _zoom: 1;
            color: #b0b0b0;
        }
        #container li .pic {
            color: #ff6700;
            margin: 0 10px 14px;
        }

    </style>
<script>
    let itemVO = [];
    jQuery(document).ready(function(){
        let itemID = window.location.search.split("?")[1].split("=")[1];
        $.ajax({
                type: 'GET',
                url:"http://localhost:8090/item/get?id=" + itemID,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data){
                    if(data.status == "success"){
                        itemVO = data.data;
                        reloadDOM();
                    }else{
                        alert("获取商品详情失败，原因为"+ data.data.errMsg)
                    }
                },
                error: function(data){
                    alert("获取商品详情失败，原因为"+ data.responseText)
                }
            })
    })
    jQuery(document).ready(function(){
        $("#createOrder").on("click",function(){
            $.ajax({
                type: 'POST',
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/order/createOrder",
                data:{
                    "itemId":itemVO.id,
                    "amount": 1
                },
                xhrFields: {
                    withCredentials: true
                },
                success: function(data){
                    if(data.status == "success"){
                        alert("下单成功");
                        window.location.reload()
                    }else{
                        alert("下单失败，原因为"+ data.data.errMsg)
                    }
                },
                error: function(data){
                    alert("下单失败，原因为"+ data.responseText)
                }
            })
        })
    })
    function reloadDOM(){
        let dom = '<li data-id="'+itemVO.id+'" id="itemDetail'+itemVO.id+'"><img src=' + itemVO.imgUrl +"'<div><h3 class='title'>" + itemVO.title +"</h3><div class='desc'>"+itemVO.description+"</div><div class='pic'>"+"$"+itemVO.price+' '+"库存"+itemVO.stock+' '+"销量"+itemVO.sales+"</div></li>";
        $("#container").append($(dom));
    }
</script>
</html>